<template>
  <div>
    <a-modal title="添加商品" :visible="visible" @before-open="open" @ok.stop="handleOk" @cancel="handleCancel" :align-center="false" title-align="start" width="1000px" :mask-closable="false">
      <div class="product-con">
        <FilterTable :filterItem="filterItem" :is-show-tag="false" v-if="visible" :isReset="false" @search="searchByVal" />

        <a-table v-if="visible" v-model:selected-keys="ids" row-key="id" :row-selection="{ type: 'checkbox', showCheckedAll: true }" :loading="loading" size="mini" class="table-singe-line" :pagination="false" :data="skuList" :scroll="{ y: '400px' }">
          <template #columns>
            <a-table-column title="序号" :width="40" #cell="{ rowIndex }">
              {{ rowIndex + 1 }}
            </a-table-column>

            <a-table-column title="店铺" :width="120" #cell="{ record }">
              <TextLimit position="top" :rows="1">{{ $extract(record, 'shopName') }}</TextLimit>
            </a-table-column>

            <a-table-column title="图片" :width="60" #cell="{ record }">
              <ImgPopover :src="getMainUrl(record)">
                <template #con>
                  <a-image width="40" height="40" fit="contain" :src="getMainUrl(record)" />
                </template>
              </ImgPopover>
            </a-table-column>
            <a-table-column title="产品名称/SKU" :width="140" #cell="{ record }">
              <TextLimit position="top" :rows="2">{{ $extract(record, 'product.skuName') }}</TextLimit>
              <TextLimit position="top" :rows="1">{{ $extract(record, 'product.sku') }}</TextLimit>
            </a-table-column>
            <a-table-column title="MSKU/ASIN" :width="140" #cell="{ record }">
              <TextLimit position="top" :rows="1">{{ record.msku }}</TextLimit>
              <TextLimit position="top" :rows="1">{{ record.asin }}</TextLimit>
            </a-table-column>
            <a-table-column title="类目" :width="60" #cell="{ record }">
              {{ $extract(record, 'category.name') }}
            </a-table-column>
            <a-table-column title="销售员" :width="80" #cell="{ record }">
              {{ $extract(record, 'saler.name') }}
            </a-table-column>
          </template>
        </a-table>
      </div>

      <template #footer>
        <a-button class="gray-outline" @click="handleCancel">取消</a-button>
        <a-button type="primary" :loading="btnLoading" @click="handleOk">确认</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { getAmzProductSale } from '@/api/publish'
  import TextLimit from '@/components/textLimit.vue'
  import FilterTable from '@/components/TableFilter.vue'
  export default defineComponent({
    components: { TextLimit, FilterTable },
    props: ['sellerMarketId'],
    setup(props: any, { emit }) {
      let visible = ref(false)
      const data = reactive({
        filterItem: [
          {
            type: 'input_keyword',
            key: 'skuList',
            keyItems: [
              { label: 'SKU', value: 'skuList' },
              { label: 'SPU', value: 'spuList' },
              { label: 'MSKU', value: 'mskuList' },
              { label: '产品名称', value: 'skuNameList' },
            ],
            keyWidth: '120',
            value: ref(),
            placeholder: '请输入',
            label: 'SKU',
            width: 180,
            isMultiple: true,
          },
        ],
        userList: [],
        skuList: [],
        loading: false,
        ids: [],
        btnLoading: false,
      })

      const open = () => {
        setTimeout(() => {
          getProductList()
        }, 180)
      }
      const handleOk = async () => {
        if (!data.ids[0]) {
          return Message.error('请选择商品')
        }
        let params = {
          pageSize: 9999,
          idList: data.ids.join(','),
        }
        data.btnLoading = true
        const res = await getAmzProductSale(params)
        data.btnLoading = false
        visible.value = false
        data.ids = []
        let arr = res?.data?.records || []
        arr.map((e: any) => {
          e.qtyOrdered = 1
          e.amtSell = 0
          e.amtUnitSell = e.price
          e.amtDiscount = 0
          e.amtActual = e.price * e.qtyOrdered
          if (!e.saler) {
            e.saler = {
              id: '',
              name: '',
            }
          }
          return e
        })
        emit('save', arr)
      }
      const handleCancel = () => {
        data.filterItem[0].value = ref('')
        data.loading = false
        data.btnLoading = false
        visible.value = false
      }
      const searchByVal = (val: any) => {
        let params = {}
        for (const key in val) {
          if (val[key] instanceof Array) {
            params[key] = val[key].split(',')
          } else {
            params[key] = val[key]
          }
        }

        getProductList(params)
      }
      const getProductList = async (info?: any) => {
        let params = {
          ...info,
          sellerMarketIdList: props.sellerMarketId ? props.sellerMarketId : '',
          pageNum: 1,
          pageSize: 20,
        }
        data.loading = true
        const res: any = await getAmzProductSale(params)
        data.skuList = res?.data?.records
        data.loading = false
      }

      const getMainUrl = (item: any) => {
        if (item.imageList && item.imageList[0]) {
          return item.imageList[0].link
        } else {
          return ''
        }
      }

      const filterSalesUser = (item: any) => {
        let salerList = item?.salerList || []
        let arr = salerList.map((e: any) => e.name)
        return arr.join(',')
      }

      return {
        ...(toRefs(data) as any),
        visible,
        open,
        handleOk,
        handleCancel,
        searchByVal,
        getMainUrl,
        filterSalesUser,
      }
    },
  })
</script>

<style lang="less" scoped>
  .order-info {
    height: 60px;
    display: flex;
    .right {
      margin-left: 10px;
      flex: 1;
      :deep(.arco-typography) {
        margin-bottom: 0;
      }
    }
  }

  .product-con {
    margin-top: 10px;
  }
</style>
